{include admin.inc.header}
<link rel="stylesheet" href="/res/mpeAdminNew/scss/css/index.css">
<!--tmpl-resource-->
{include admin.inc.top}

<div class="container-fluid content-body">
	<div class="main">
		<!-- left side start-->

		<section class="left-section">

		</section>
		<section class="right-section" id="right-section">
            <div class="l">
                <div class="row">
                    <div class="col1">
                    <article class="card">
                        <div class="head">待办事项</div>
                        <div class="cont">
                            <dl class="col-md-4">
                                <dt>待确认</dt>
                                <dd>{$merchant_confirmTotal}</dd>
                            </dl>
                            <dl class="col-md-4">
                                <dt>待确认收款</dt>
                                <dd>{$pendIngReceipt}</dd>
                            </dl>
                            <dl class="col-md-4">
                                <dt>待发货</dt>
                                <dd>{$noShippedTotal}</dd>
                            </dl>
                        </div>
                    </article>
                    </div>
                    <div class="col2">
                    <article class=" card">
                        <ul class="head tab">
                            <li class="active"><a href="javascript:;">会员</a></li>
                            <li><a href="javascript:;">商品</a></li>
                        </ul>
                        <ol class="cont">
                            <li class="active">
                                <dl class="col-md-3">
                                    <dt>今日新增</dt>
                                    <dd>{$to_member}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>昨日新增</dt>
                                    <dd>{$week_member}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>本月新增</dt>
                                    <dd>{$mon_member}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>总共</dt>
                                    <dd>{$member}</dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="col-md-3">
                                    <dt>今日新增</dt>
                                    <dd>{$to_productTotal}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>昨日新增</dt>
                                    <dd>{$week_productTotal}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>本月新增</dt>
                                    <dd>{$mon_productTotal}</dd>
                                </dl>
                                <dl class="col-md-3">
                                    <dt>总共</dt>
                                    <dd>{$productTotal}</dd>
                                </dl>
                            </li>
                        </ol>
                    </article>
                    </div>
                </div>
                <div class="row">
                    <article class="col1 card">
                        <div class="head">财务</div>
                        <div class="cont" style="padding-bottom: 26px;">
                            <dl class="col-md-5">
                                <dt>可用余额（元）</dt>
                                <dd><em class="mc " id="js_useable" data-val="{$userInfo[usable]}">{$userInfo[usable]}</em></dd>
                                <dd class="btn-wrap">
                                    <a class="mch" href="javascript:;"  data-act="moneyIn">入金</a>
                                    <a class="mch" href="javascript:;" data-act="moneyOut">出金</a>
                                    <a class="mch" href="/admin/fund/log.shtml" >资金流水</a>
                                </dd>
                            </dl>
                            <dl class="col-md-3">
                                <dt>冻结资金（元）</dt>
                                <dd><em class="mc ">{$userInfo[out_frozen]}</em></dd>
                            </dl>
                            <dl class="col-md-4">
                                <dt>附属账户（元）</dt>
                                <dd><em class="mc ">{$balance}</em></dd>
                                <dd class="btn-wrap">
                                    {if in_array('admin/fund/recharge',$priv) || empty($priv)}
                                    <span id="chargeWrap" data-class="mch"></span>
                                    {/if}
                                    <span id="chargeWrap" data-class="mch"></span>
                                    {if in_array('admin/fund/withdraw',$priv) || empty($priv)}
                                    <a href="javascript:;" class="mch" data-act="withdraw">提现</a>
                                    {/if}
                                </dd>
                            </dl>
                        </div>
                    </article>
                    <article class="col2 card sms-wrap">
                        <div class="head">短信资产</div>
                        <div class="cont">
                            <div class="col-md-4">
                                <div id="chartSms" style="height:130px;"></div>
                            </div>
                            <div class="col-md-4">
                                <dl class="dotted">
                                    <dt style="margin-bottom: 0;">账户</dt>
                                    <dd style="margin-bottom: 16px;font-size: 14px;"><span>{$smsUser}</span></dd>
                                </dl>
                                <dl class="dotted c1">
                                    <dt>短信剩余（条）</dt>
                                    <dd id="smsRest">{$smsBalance}</dd>
                                </dl>
                            </div>
                            <div class="col-md-4">
                                <p style="margin-bottom: 21px;margin-top: 5px;"><a href="http://sms.cr6868.com/" class="btn" target="_blank">立即充值</a></p>
                                <dl class="dotted c2">
                                    <dt>短信预警数（条）</dt>
                                    <dd id="smsRisk">{$smRisk}</dd>
                                </dl>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="row"><div class="card charts_wrap">
                    <ol class="fr days">
                        <li class="active" data-days="7"><a href="javascript:;">最近一周</a></li>
                        <li data-days="30"><a href="javascript:;">最近一月</a></li>
                    </ol>
                    <ul class="head tab">
                        <li class="active loaded" data-type="amount"><a href="javascript:;">销售额</a></li>
                        <li data-type="number"><a href="javascript:;">销售量</a></li>
                        <li data-type="ranking"><a href="javascript:;">销售排行</a></li>
                    </ul>
                    <ol class="cont">
                        <li class="active">
                            <div id="sale1" style="height: 400px;"></div>
                        </li>
                        <li>
                            <div id="sale2" style="height: 400px;width: 1122.89px"></div>
                        </li>
                        <li>
                            <div id="sale3" style="height: 400px;width: 1122.89px"></div>
                        </li>
                    </ol>
                </div></div>
            </div>
            <div class="r">
                <article class="update-log">
                    <header><h2>产品动态</h2></header>
                    <div class="cont">
                        <dl>
                            <dt>大苏支付支付API2.上线预告</dt>
                            <dd>尊敬的云商城用户 您好！ 营销中心项目于3.1号至3.20号…</dd>
                            <dd>2017-10-54 20:09</dd>
                            <dd class="detail">
                                <div class="update-layer">
                                    <h3>大苏支付2.0上线公告</h3>
                                    <p>尊敬的大苏支付会员：</p>
                                    <p>尊敬的云商城用户 您好！ 营销中心项目于3.1号至3.20号期间公测，公测活动现即将结束，营销中心将于3.20日晚上9点正式发布上线。 上线之后，营销中心会全面覆盖原来老的营销活动(营销中心公测数据不受影响)，玩法也变得更丰富，在设置活动之前，详情</p>
                                    <ol>
                                        <li>本次升级的主要内容如下：</li>
                                        <li>1.升级API接口稳定性</li>
                                        <li>2.添加短信统计接口</li>
                                        <li>3.升级UI</li>
                                    </ol>
                                    <p>有问题请拼命调戏我们的测试妹子~~~</p>
                                </div>
                            </dd>
                        </dl>
                        <dl class="pass">
                            <dt>大苏支付支付API2.上线预告</dt>
                            <dd>尊敬的云商城用户 您好！ 营销中心项目于3.1号至3.20号…</dd>
                            <dd>2017-10-54 20:09</dd>
                            <dd class="detail">
                                <div class="update-layer">
                                    <h3>大苏支付2.0上线公告</h3>
                                    <p>尊敬的大苏支付会员：</p>
                                    <p>尊敬的云商城用户 您好！ 营销中心项目于3.1号至3.20号期间公测，公测活动现即将结束，营销中心将于3.20日晚上9点正式发布上线。 上线之后，营销中心会全面覆盖原来老的营销活动(营销中心公测数据不受影响)，玩法也变得更丰富，在设置活动之前，详情</p>
                                    <ol>
                                        <li>本次升级的主要内容如下：</li>
                                        <li>1.升级API接口稳定性</li>
                                        <li>2.添加短信统计接口</li>
                                        <li>3.升级UI</li>
                                    </ol>
                                    <p>有问题请拼命调戏我们的测试妹子~~~</p>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </article>
            </div>
				<!--<div class="inner-container">

                    <article class="summary">
                        <ul class="tab">
                            <li class="active">周</li>
                            <li>月</li>
                            <li>总</li>
                        </ul>
                        <div class="row">
                            <div class="col-md-6 first">
                                <ul class="tab-content">
                                    <li class="active">
                                        <dl class="col-md-4">
                                            <dt>本周销售额(￥)</dt>
                                            <dd class="mc">{expr number_format($week_sale,2)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>本周订单量(笔)</dt>
                                            <dd class="mc">{expr number_format($week_order)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>本周新增会员(个)</dt>
                                            <dd class="mc">{expr number_format($week_member)}</dd>
                                        </dl>
                                    </li>
                                    <li>
                                        <dl class="col-md-4">
                                            <dt>本月销售额(￥)</dt>
                                            <dd class="mc">{expr number_format($mon_sale,2)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>本月订单量(笔)</dt>
                                            <dd class="mc">{expr number_format($mon_order)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>本月新增会员(个)</dt>
                                            <dd class="mc">{expr number_format($mon_member)}</dd>
                                        </dl>
                                    </li>
                                    <li>
                                        <dl class="col-md-4">
                                            <dt>总销售额(￥)</dt>
                                            <dd class="mc">{expr number_format($sale,2)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>总订单量(笔)</dt>
                                            <dd class="mc">{expr number_format($order)}</dd>
                                        </dl>
                                        <dl class="col-md-4">
                                            <dt>总会员(个)</dt>
                                            <dd class="mc">{expr number_format($member)}</dd>
                                        </dl>
                                    </li>
                                </ul>

                            </div>
                            <div class="col-md-6">
                                <dl class="col-md-4">
                                    <dt>商品数(个)</dt>
                                    <dd>{expr number_format($productTotal)}</dd>
                                </dl>
                                <dl class="col-md-4">
                                    <dt>销售量({$pro_unit})</dt>
                                    <dd>{expr number_format($saleWeight,3)}</dd>
                                </dl>
                                <dl class="col-md-4">
                                    <dt>库存({$pro_unit})</dt>
                                    <dd>{expr number_format($totalWeight,3)}</dd>
                                </dl>
                            </div>
                        </div>
                    </article>
					&lt;!&ndash;analytic start here&ndash;&gt;
					<div class="row">

						<div class="analytic">
							<div class="analttic-right">
								<div class="graph-grid">

									&lt;!&ndash;graph&ndash;&gt;
									&lt;!&ndash;//graph&ndash;&gt;
									&lt;!&ndash; Graph HTML &ndash;&gt;
									<div id="graph-wrapper" class="wrapper">
                                        <h2 class="head"><i class="glyphicon glyphicon-stats"></i>统计表</h2>
										<div class="graph-container">
											<div id="graph-lines"> </div>
										</div>
									</div>
									&lt;!&ndash; end Graph HTML &ndash;&gt;
								</div>
							</div>
						</div>
					</div>
					&lt;!&ndash;//graph&ndash;&gt;
				</div>-->
            <!-- end of inner -->

		</section>

	</div>
</div>

{include admin.inc.footer}
<script src="/res/mpeAdminNew/js/common/echart/echarts.js"></script>
<script>
    seajs.use(["account","sms"],function (account,sms) {
        account.operate("{$userInfo[payway]}");//充值传银行类型的参数
        sms.init(); //消息饼状图初始化

        $(document).ready(function () {
            var skin = '.' + $("#changeSkin").data("now"), current_color;
            var $skin = $("#changeSkin").find(skin);
            if ($skin.length > 0) {
                current_color = $skin.data("color");
            } else {
                current_color = $("#changeSkin").find(".skin").data("color");
            }


            //公告弹窗
            $(".update-log").on("click",".cont>dl",function(){
                var detail  = $(this).children(".detail").html();
                layer.open({
                    /*type:4,*/
                    title:" ",
                    closeBtn:1,
                    area:"550px",
                    content: detail,
                    btn: false,
                })
            })

            /*===============================图表==============*/


            /*=======================================end 图表===============================*/
            /*tab 切换数据*/
            $(".card .tab").on("click", "li", function () {
                var $this = $(this);
                var $ol = $this.parent().next('ol');
                if ($this.hasClass("active")) {
                    return false;
                } else {
                    var index = $this.index();
                    $this.addClass("active");
                    $this.siblings(".active").removeClass("active");

                    $ol.find(".active").removeClass("active");
                    $ol.find("li").eq(index).addClass("active");
                }
            });



            //销售额配置
            var option1 = {
                noDataLoadingOption:{
                    effect:"ring",
                    text:"暂无数据…"
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.4)'
                },
                legend: {
                    data: ['商城销售详情'],
                    borderColor: current_color,
                },
                grid: {
                    zlevel: -1,
                    borderWidth: 0,
                    borderColor: "#000"
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: []
                        //data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    }
                ],
                series: [
                    {
                        name: '商城销售详情',
                        type: 'line',
                        //data:[3000, 2000, 1500, 3500, 4600, 6000, 5400],
                        data: [],
                        itemStyle: {
                            normal: {
                                color: current_color,
                                lineStyle: {
                                    color: current_color
                                }
                            }
                        },
                        markPoint: {
                            itemStyle: {
                                normal: {
                                    color: current_color
                                },
                            },
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ],

                        },
                        markLine: {
                            itemStyle: {
                                normal: {
                                    color: current_color,
                                    lineStyle: {
                                        color: current_color
                                    }
                                }
                            },
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            var option2 = {
                noDataLoadingOption:{
                    effect:"ring",
                    text:"暂无数据…"
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.4)'
                },
                legend: {
                    data: ['商城销售量详情'],
                    //backgroundColor: current_color,
                    //borderColor: current_color,
                },
                grid: {
                    borderWidth: 0,
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}吨'
                        }
                    }
                ],
                series: [
                    {
                        name: '商城销售量详情',
                        type: 'line',
                        data: [3000, 2000, 1500, 3500, 4600, 6000, 5400],

                        itemStyle: {
                            normal: {
                                color: current_color,
                                lineStyle: {
                                    color: current_color
                                }
                            }
                        },
                        markPoint: {
                            itemStyle: {
                                normal: {
                                    color: current_color
                                },
                            },
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ],

                        },
                        markLine: {
                            itemStyle: {
                                normal: {
                                    color: current_color,
                                    lineStyle: {
                                        color: current_color
                                    }
                                }
                            },
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            //销售排行配置
            var option3 = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.4)'
                },
                legend: {
                    data: ["销售排行"]
                },
                noDataLoadingOption:{
                    effect:"bar",
                    text:"暂无数据…"
                },
                grid: {
                    borderWidth: 0,
                },
                xAxis: [
                    {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        //data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
                        data:[],
                        axisLine: {
                            lineStyle: {
                                color: "#ccc",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '销售排行',
                        type: 'bar',
                        //data: [18203, 23489, 29034, 104970, 131744, 630230],
                        data:[],
                        itemStyle: {
                            normal: {
                                color: current_color,
                                barBorderRadius: [0, 5, 5, 0],
                                lineStyle: {
                                    color: current_color
                                }
                            }
                        },
                        barWidth: 15,
                    }
                ]
            };
            var sale1 = echarts.init(document.getElementById('sale1'));
            var sale2 = echarts.init(document.getElementById('sale2'));
            var sale3 = echarts.init(document.getElementById('sale3'));
           // sale3.setOption(option3);

            //初始化销售额数据
            getChartData({
                $chart:sale1,type: "amount",days:7, callback: function(data){
                    option1.xAxis[0].data = data.x;
                    var y = data.y.map(function(num){
                        return Number(num)
                    });

                    option1.series[0].data = y;
                    sale1.setOption(option1);
                }
            });
            //图表类型切换
            $(".charts_wrap").on("click", ".head li", function () {
                var loaded = $(this).hasClass("loaded");
                var type = $(this).data("type");
                var days = $(".charts_wrap .days").find(".active").data("days");
                renderChart(type,days);
            });
            //图表日期切换
            $(".charts_wrap .days").on("click", "li", function () {
                var $this = $(this);
                var days = $this.data("days");
                var type= $(".charts_wrap .head .active").data("type");
                if ($this.hasClass("active")) {
                    return false;
                } else {
                    var index = $this.index();
                    $this.addClass("active");
                    $this.siblings(".active").removeClass("active");
                    renderChart(type,days);
                }
            });

            //渲染图表数据
            function renderChart(type,days){

                var $chart,opt;
                switch (type) {
                    case "amount":
                        $chart = sale1;
                        opt = option1;
                        break;
                    case "number" :
                        $chart = sale2;
                        opt = option2;
                        break;
                    case "ranking":
                        $chart = sale3;
                        opt = option3;
                        break;
                    default:
                        $chart = sale1;
                        opt = option1;

                }
                getChartData({
                    $chart:$chart,type: type ,days:days, callback: function(data){
                        if(type!="ranking"){
                            opt.xAxis[0].data = data.x;
                        }else {
                            opt.yAxis[0].data = data.x;

                        }
                        var y = data.y.map(function(num){
                            return Number(num)
                        });
                        opt.series[0].data = y;
                        //console.log($chart.getOption());
                        $chart.setOption(opt,true);
                        //console.log($chart.getOption());

                    }
                });

            }
            //获取图表数据
            function getChartData(option) {
                //number,ranking
                var opt = option;
                var type = opt.type || "amount", days = opt.days || 7;
                $.ajax({
                    url: "/admin/index/getSellDate",
                    data: {type: type, days: days},
                    dataType:"json",
                    beforeSend: function () {
                        /*opt.$chart.showLoading({
                            text: '正在努力读取数据中……',
                        })*/
                    }
                }).done(function (data) {
                    if (data.code === "000") {
                        //opt.$chart
                        opt.callback(data.data);
                    } else {
                        //layer.alert('<div class="red" style="margin-left:50px;">'+data.message+'</div>', {title: "请求出错信息"});
                        var item = {x:[],y:[]};
                        opt.callback(item);
                    }
                    //opt.$chart.hideLoading();
                }).always(function () {
                    //opt.$chart.hideLoading();
                })


            }


        });
    })
</script>
</body>
</html>
